<template>
  <div class="withdrawal_new">
    <div class="input_box">
      <div class="body_input">
        <div class="BankAddress">
          <div class="user_title">银行卡号</div>
          <div class="user_name">
            <span v-if="UserInformation.bankName">{{UserInformation.bankName}}
              尾号({{UserInformation.bankCardNum | back_name_digits}})</span>
            <span class="arrow" @click="card_list" v-else>{{UserInformation.cardId?'点击绑定银行卡':'请前往app实名认证'}}</span>
            <img v-if="UserInformation.cardId" @click="card_list" src="../../public/img/other/back_.png" alt="" />
          </div>
          <div v-if="opening_bank_" :class="!opening_bank_is ? 'isback_hong' : ''">
            {{ opening_bank_ }}
          </div>
        </div>
      </div>

      <div class="body_input">
        <div>
          <div class="user_title">真实姓名</div>
          <div class="user_name">
            <input v-if="UserInformation.realname" type="text" v-model="UserInformation.realname" disabled />
            <input v-else type="text" placeholder="请前往app实名认证" disabled />
          </div>
        </div>
      </div>

      <div class="body_input">
        <div>
          <div class="user_title">身份证号</div>
          <div class="user_name">
            <input type="text" v-if="UserInformation.cardId" v-model="UserInformation.cardId" disabled />
            <input type="text" v-else placeholder="请前往app实名认证" disabled />
          </div>
        </div>
      </div>

      <div class="body_input">
        <div>
          <div class="user_title">提现积分</div>
          <div class="user_name color_input">
            <input type="number" placeholder="0" v-model="WithdrawalPoints" />
          </div>
        </div>
      </div>

      <div class="balance">
        <span>积分余额：{{UserInformation.balance}}</span>
      </div>

      <div v-if=" UserInformation.realname && UserInformation.cardId" class="withdrawal_btn"
        @click.stop="okAddCardClick">提现</div>
      <div v-else class="withdrawal_btn_">请前往app实名认证</div>

      <div class="Tips_">
        <img v-if="isChecked" src="../../public/img/other/radius_trur.png" @click="isChecked = !isChecked" alt="">
        <img v-else src="../../public/img/other/radius_false.png" @click="isChecked = !isChecked" alt="">
        <span @click="topush">《平台合作协议》</span>
      </div>
    </div>

    <div class="result_rule">
      <span>提现规则：</span>
      <span>1. 100元≤可提现金额＜100,000元 </span>
      <span>2. 提现到银行卡，于申请后3个工作日内到账(节假日顺延)</span>
      <span>3. 提现仅可每周一发起一次</span>
      <span>4. 提现失败将退回积分</span>
    </div>
    <van-popup v-model="withdrawTextshow" position="bottom" :style="{ height: model_height+59 +'vw'}" closeable
      close-icon-position="top-left" class="model_" round>
      <div class="top_title"> 选择提现银行卡 </div>
      <div class="bacg_box">
        <div v-for="item,index in card_list_" :key="index" class="box_list_card" @click="Select = index">
          <img v-if="item.bankIcon" :src="item.bankIcon" alt="">
          <img v-else src="../../public/img/other/black_card.png" alt="">
          <div> {{item.bankName}}({{item.cardNum | back_name_digits}}) <img v-if="index == Select"
              src="../../public/img/other/Select.png" alt=""></div>
        </div>
      </div>
      <div class="addTo" @click="toWithdrawal_push">
        <div class="left_back">
          <img src="../../public/img/other/black_card.png" alt="">
          <span>修改银行卡</span>
        </div>
        <div class="right_back">
          <img src="../../public/img/other/back_.png" alt="">
        </div>
      </div>
      <div class="button_buttom">
        <div>确认</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import {
    Toast
  } from "vant";
  import {
    Dialog
  } from "vant";
  import "../../assets/jquery-3.4.1.js";
  import "../../assets/jquery-3.4.1.min.js";
  import md5 from "js-md5";
  import qs from "qs";
  import {
    areaList
  } from "@vant/area-data";
  export default {
    data() {
      return {
        WithdrawalPoints: "", //提现积分
        UserInformation: {}, //用户信息
        opening_bank_: "",
        opening_bank_is: false,
        qs_opening_bank: "",
        isChecked: true,
        withdrawTextshow: false, //银行卡弹窗
        model_height: '', //弹窗高度
        card_list_: [], //银行卡列表
        Select: 0, //默认选择第一张银行卡
        userId: "",
        token:"",

      };
    },
    watch: {
      WithdrawalPoints: {
        handler: function () {
          if (this.WithdrawalPoints > Number(this.UserInformation.balance)) {
            this.WithdrawalPoints = Math.floor(Math.abs(this.UserInformation.balance));
            return Toast("最多兑换" + this.UserInformation.balance);
          } else {
            if (this.WithdrawalPoints != "") {
              this.WithdrawalPoints = Number(Math.floor(Math.abs(this.WithdrawalPoints)));
            }
          }
        },
        deep: true,
      },
    },
    filters: {
      back_name_digits(number_) {
        if (number_) {
          let str = "";
          str = +number_.substring(number_.length - 4);
          return str
        }
      },
    },
    created() {
      this.$store.commit("empty");
      let token = this.$.getCookie("token");
      if (!token) {
        this.$store.commit("change", "/withdrawal_new");
        this.$router.push("/login");
      }
      let userId = this.$.getCookie("userId");
      this.userId = userId;
      this.token = token;
      this.withdrawText();
    },
    methods: {
      toWithdrawal_push() {
        // this.$router.push("/withdrawal_push");
      },
      okAddCardClick() { //提现
        if (this.WithdrawalPoints < 100) {
          return Toast('最低提现100元')
        }
        if (!this.isChecked) {
          return Toast('请勾选平台合作协议')
        }
        if (!this.UserInformation.bankCardNum) {
          return Toast('银行卡号不能为空')
        }
        let arys = {
          type: '1',
          num: this.WithdrawalPoints,
          bankId: this.UserInformation.bankId,
          userId : this.userId,
          token:this.token,
        }; //参数
        let url = "/user/postWithdraw";
        this.$.encryption2(arys, url).then((res) => {
          Toast(res.data.text)
          this.withdrawText();
        });
      },
      //获取银行卡号
      card_list() {
        this.$router.push("/withdrawal_push");
        // let arys = {}; //参数
        // let url = "/user/card_list";
        // this.$.encryption2(arys, url).then((res) => {
        //   if (res.data.status === 0) {
        //     this.card_list_ = res.data.result;
        //     this.model_height = res.data.result.length * 15;
        //     this.withdrawTextshow = true;
        //   }
        // });
      },
      handleDisabled() {
        this.isChecked = !this.isChecked;
        if (this.isChecked == true) {
          this.isDisabled = true;
        } else {
          this.isDisabled = false;
        }
      },
      showPopup() {
        if (!this.cardNum) {
          return Toast("银行卡号不能为空");
        }
      },
      topush() {
        this.$router.push({
          path: "/PlatformProtocol",
          // query: {
          //   realname: this.UserInformation.realname,
          //   cardId: this.UserInformation.cardId,
          //   createTime: this.UserInformation.createTime
          // },
        });
        // this.$router.push("/PlatformProtocol");
      },
      withdrawText() {
        let arys = {
          userId: this.userId,
          token: this.token,
        }; //参数
        let url = "/user/withdrawText";
        this.$.encryption2(arys, url).then((res) => {
          // console.log(res);
          if (res.data.status === 0) {
            this.UserInformation = res.data.result
          } else {
            Toast(res.data.text)
          }
        });
      },
    },
  };
</script>
<style scoped lang="less">
  @auto: 0 auto;

  .pxToVW (@px, @attr: width) {
    @vw: unit(round((@px / 414) * 100));
    @{attr}:~"@{vw}vw";
  }

  .model_ {
    display: flex;
    flex-direction: column;

    .top_title {
      .pxToVW(62, height);
      .pxToVW(382);
      border-bottom: 1px solid #E6E6E7;
      display: flex;
      justify-content: center;
      align-items: center;
      .pxToVW(18, font-size);
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #333333;
      margin: @auto;
    }

    .addTo {
      .pxToVW(62, height);
      .pxToVW(382);
      margin: @auto;
      border-bottom: 1px solid #E6E6E7;
      .pxToVW(16, font-size);
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 500;
      color: #333333;
      display: flex;
      justify-content: space-between;

      .left_back {
        display: flex;
        align-items: center;
        height: 100%;

        img {
          .pxToVW(25, height);
          .pxToVW(24);
          margin-right: 2vw;
        }
      }

      .right_back {
        display: flex;
        align-items: center;
        height: 100%;

        img {
          .pxToVW(8);
          .pxToVW(15, height);
        }
      }
    }

    .bacg_box {
      width: 92vw;
      margin: @auto;
      display: flex;
      flex-direction: column;

      .box_list_card {
        width: 92vw;
        .pxToVW(62, height);
        margin: @auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        img:nth-of-type(1) {
          .pxToVW(20);
          .pxToVW(20, height);
          .pxToVW(8, margin-right);
        }

        >div {
          flex: 1;
          position: relative;
          display: flex;
          align-items: center;
          .pxToVW(16, font-size);
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          height: 100%;
          border-bottom: 1px solid #F6F6F6;

          img {
            position: absolute;
            right: 0;
            .pxToVW(20);
            .pxToVW(20, height);
          }
        }
      }
    }

    .button_buttom {
      width: 92vw;
      .pxToVW(120, height);
      margin: @auto;
      display: flex;
      align-items: center;
      justify-content: center;

      div {
        .pxToVW(330);
        .pxToVW(46, height);
        .pxToVW(46, line-height);
        .pxToVW(16, font-size);
        background: linear-gradient(135deg, #64D4FF 0%, #3072FF 100%, #3072FF 100%);
        border-radius: 6vw;
        text-align: center;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }
    }
  }

  .withdrawal_new {
    width: 100vw;
    background: #f6f7f9;
    height: 100vh;
    overflow: hidden;
  }

  .input_box {
    margin: @auto;
    background: #fff;
    .pxToVW(382);
    .pxToVW(500, height);
    .pxToVW(10, border-radius);
    .pxToVW(24, margin-top);

    .body_input {
      margin: @auto;
      width: 86vw;
      .pxToVW(16, font-size);
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 4.5vw;
      margin-bottom: 3.5vw;
      padding-top: 2vw;

      >div:nth-of-type(1) {
        display: flex;
        justify-content: flex-end;
        border-bottom: 1px solid #f6f6f6;
        position: relative;
        height: 14vw;
      }

      .user_title {
        flex: 1;
        line-height: 14vw;
        font-weight: 500;
        display: flex;
      }

      .user_title>span {
        color: #f10e0e;
      }

      .user_name {
        width: 68vw;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;

        span {
          .pxToVW(16, font-size);
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
        }

        .arrow {
          color: gray;
        }
      }

      .user_name input {
        width: 86%;
        border: #fff;
        background: #fff;
      }

      .color_input input {
        color: #0091FF;
        .pxToVW(18, font-size);
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
      }

      .user_name img {
        width: 3.5%;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
      }
    }
  }

  .balance {
    width: 86vw;
    color: #333333;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    .pxToVW(14, font-size);
    .pxToVW(19, padding-top);
    margin: @auto;
  }

  .isback_hong {
    position: absolute;
    color: #f10e0e !important;
    bottom: 1px;
    left: 20vw;
  }

  .withdrawal_btn {
    background: linear-gradient(135deg, #64D4FF 0%, #3072FF 100%, #3072FF 100%);
    border-radius: 6.55vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    margin: @auto;
    .pxToVW(330);
    .pxToVW(46, height);
    .pxToVW(16, font-size);
    .pxToVW(46, line-height);
    .pxToVW(28, margin-top);
    text-align: center;
  }

  .withdrawal_btn_ {
    background: #D6D7D8;
    border-radius: 6.55vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    margin: @auto;
    .pxToVW(330);
    .pxToVW(46, height);
    .pxToVW(16, font-size);
    .pxToVW(46, line-height);
    .pxToVW(28, margin-top);
    text-align: center;
  }

  .Tips_ {
    width: 100%;
    height: 10vw;
    margin: @auto;
    margin-top: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .Tips_>img {
    .pxToVW(15);
    .pxToVW(15, height);
    margin-right: 0.4vw;
  }

  .Tips_>span {
    .pxToVW(12, font-size);
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #0091FF;
  }

  .result_rule {
    .pxToVW(360);
    .pxToVW(14, font-size);
    margin: @auto;
    .pxToVW(20, margin-top);
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    display: flex;
    flex-direction: column;
    .pxToVW(28, line-height);

    >span:nth-of-type(1) {
      .pxToVW(16, font-size);
    }
  }
</style>